<!-- 需求列表  -->
<template>
  <pageHeader :title="title" :breadCrumb="breadCrumb">
    <template #buts>
      <a-button type="primary" @click="addDemand">
        <template #icon>
          <icon-plus />
        </template>
        录入需求
      </a-button>
    </template>
  </pageHeader>
  <div class="search-box">
    <div>
      <a-space>
        <a-input-search
          search-button
          v-model="NumberSearch"
          :style="{ width: '220px' }"
          placeholder="需求单号"
          @search="Search"
        />
        <a-input-search
          search-button
          v-model="clientCompanyNameVal"
          :style="{ width: '220px' }"
          placeholder="客户"
          @search="Search"
        />

        <a-select v-model="StateVal" @change="Search"
          ><template #prefix>状态：</template>
          <a-option :value="1">待提交</a-option>
          <a-option :value="3">评审中</a-option>
          <a-option :value="4">已通过</a-option>
          <a-option :value="5">不通过</a-option>
          <a-option :value="6">已完成</a-option>
        </a-select>
        <a-button type="outline" @click="resetting">
          <template #icon> <icon-refresh /> </template>重置</a-button
        >
      </a-space>
    </div>

    <div>
      <a-space>
        <a-button status="success">
          <template #icon>
            <icon-download />
          </template>
          <template #default>导入</template>
        </a-button>
        <a-button status="warning" @click="getDemandDeriveData">
          <template #icon>
            <icon-upload />
          </template>
          <template #default>导出</template>
        </a-button>
      </a-space>
    </div>
  </div>
  <tableTurn
    style="padding: 0px 10px"
    :tableData="getDemandAll"
    :args="args"
    ref="tableRef"
  >
    <a-table-column :width="70" align="center">
      <template #title> 序号 </template>
      <template #cell="{ rowIndex }">
        {{ rowIndex + 1 }}
      </template>
    </a-table-column>
    <a-table-column
      title="需求编号"
      data-index="number"
      align="center"
      :ellipsis="true"
      :tooltip="{
        position: 'top',
      }"
    />
    <a-table-column
      title="客户名称"
      data-index="clientCompanyName"
      align="center"
      :width="200"
      :ellipsis="true"
      :tooltip="{
        position: 'top',
      }"
    />
    <a-table-column title="业务员" data-index="userStaffName" align="center" />
    <a-table-column title="需求总额" data-index="totalPrice" align="center" />
    <a-table-column title="需求创建时间" data-index="createdAt" align="center"
      ><template #cell="{ record }">
        {{ dayjs(record.createdAt).format('YYYY - MM - DD') }}
      </template>
    </a-table-column>
    <a-table-column title="状态" data-index="state" align="center"
      ><template #cell="{ record }">
        <div
          class="status"
          :style="{
            color: orderStatus.filter((ele) => ele.id === record.state)[0]
              ?.backgroundColor,
          }"
        >
          <p
            :style="{
              'background': orderStatus.filter(
                (ele) => ele.id === record.state
              )[0]?.backgroundColor,
              'box-shadow': `0px 0px 5px`,
            }"
          ></p>
          {{ orderStatus.filter((ele) => ele.id === record.state)[0]?.value }}
        </div></template
      ></a-table-column
    >
    <a-table-column :width="150" fixed="right" title="操作" align="center">
      <template #cell="{ record }">
        <a-space>
          <a-tooltip
            v-if="record.state === 1 && record.userStaffId === userInfo.id"
            content="提交评审"
          >
            <IconFont
              type="icon-shenhe"
              :size="20"
              :style="{
                marginRight: '10px',
                cursor: 'pointer',
                color: 'rgb(22, 93, 254)',
              }"
              @click="submitReview(record)"
            />
          </a-tooltip>

          <a-tooltip content="详情">
            <IconFont
              type="icon-details-def"
              :size="26"
              :style="{
                marginRight: '10px',
                cursor: 'pointer',
              }"
              @click="edit(record.id)"
            />
          </a-tooltip>
          <a-tooltip v-if="record.state !== 6" content="删除">
            <a-popconfirm
              content="确认删除？"
              type="error"
              @ok="del(record.id)"
            >
              <IconFont
                type="icon-delete"
                :size="26"
                :style="{
                  marginRight: '10px',
                  cursor: 'pointer',
                }"
              />
            </a-popconfirm>
          </a-tooltip>
        </a-space>
      </template>
    </a-table-column>
  </tableTurn>
  <!-- </div> -->
</template>

<script lang="ts" setup>
  import { reactive, onMounted, ref, nextTick } from 'vue';
  import {
    postOrderDemandSearch,
    deleteDemandForm,
    putDemandStatus,
    putDemandForm,
    GetDemandDeriveExcel,
    putDemandState,
  } from '@/api/order-management/client-management/demand/demand';
  import {
    putBasisFlowSubmitReview,
    postBasisFlowAudit,
  } from '@/api/home/System settings/basis-flow';
  import { useRouter } from 'vue-router';
  import dayjs from 'dayjs';
  import { Blob } from 'buffer';
  import { openChoiceFile } from '@/utils/file';
  import { color } from 'echarts';

  const router = useRouter();
  const NumberSearch = ref();
  const clientCompanyNameVal = ref();
  const StateVal = ref();
  // 表格配置
  const args = reactive({
    stripe: false,
    bordered: {
      headerCell: true,
    },
    rowKey: 'id', // 批量选择按钮 以合同名称来作为key
  });
  const userInfo = JSON.parse(sessionStorage.getItem('loginInfo') as any);
  const selectedKeys = ref([]);
  const tableRef = ref();
  const selectData = ref<any[]>([]);
  const select = (e: any, b: any, c: any) => {
    let item = selectData.value.findIndex((element: any) => {
      return element.id === b;
    });
    if (item === -1) {
      selectData.value.push(c);
    } else {
      selectData.value.splice(item, 1);
    }
  };

  const orderStatus = [
    { id: 1, value: '待提交', backgroundColor: '#cccccc' },
    { id: 2, value: '待评审', backgroundColor: '#009933' },
    { id: 3, value: '评审中', backgroundColor: '#4e8bfb' },
    { id: 4, value: '已通过', backgroundColor: '#009933' },
    { id: 5, value: '不通过', backgroundColor: '#dc143c' },
    { id: 6, value: '已完成', backgroundColor: '#009933' },
  ];

  const breadCrumb: string[] = ['订单管理', '客户订单需求', '客户需求列表'];
  const title: string = '客户需求列表';
  let msg = reactive<any>({});
  // 获取需求列表
  const getDemandAll = async (page: any) => {
    try {
      let msg: any = {};
      if (NumberSearch.value) msg.number = NumberSearch.value;
      if (clientCompanyNameVal.value)
        msg.clientCompanyName = clientCompanyNameVal.value;
      if (StateVal.value) msg.state = StateVal.value;
      let res = await postOrderDemandSearch({ ...page, ...msg });
      return Promise.resolve(res);
    } catch (err: unknown) {
      console.log(err);
    }
  };
  // getDemandAll();

  const addDemand = () => {
    router.push({
      name: 'DemandAdd',
    });
  };

  const Search = () => {
    tableRef.value.refreshPaging();
    tableRef.value.loadData();
  };
  // 编辑
  const edit = (id: number) => {
    router.push({
      name: 'DemandEdit',
      query: { id },
    });
  };
  const submitReview = async (record: any) => {
    await putDemandState({ id: record.id, state: 3 });
    tableRef.value.loadData();
  };
  const transferOrder = (record: any) => {
    router.push({
      name: 'SalesOrderAdd',
      query: { id: record.id },
    });
  };

  const resetting = () => {
    NumberSearch.value = '';
    clientCompanyNameVal.value = '';
    StateVal.value = '';
    tableRef.value.refreshPaging();
    tableRef.value.loadData();
  };

  const del = async (id: number) => {
    await deleteDemandForm({ id });
    tableRef.value.loadData();
  };

  const getDemandDeriveData = async () => {
    GetDemandDeriveExcel();
  };
</script>

<style scoped lang="less">
  .search-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px;
    margin-top: -7px;
  }

  .status {
    display: flex;
    align-items: center;
    justify-content: center;

    p {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin-right: 10px;
    }
  }
</style>
